<template>
  <view :style="themeColor">
    <view class="page">
      <!-- :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx','background-image':
'url(' + bg_img + ')' }" -->
      <view class="flex benben-position-layout flex flex-wrap align-center propertyDetails_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
        <view class='flex flex-wrap align-center justify-between flex-sub propertyDetails_fd0_0'>
          <view class='flex flex-wrap align-center propertyDetails_fd0_0_c0' @tap.stop="goBack" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  propertyDetails_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='propertyDetails_fd0_0_c1_c0'>{{$t('房源详情')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-end propertyDetails_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-center benben-flex-layout">
        <view style="position: relative">
          <swiper ref="benbenSwiperfd1_0" @change="changebgImage($event)"
            class='flex position-relative propertyDetails_fd1_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='false' :circular='true'>

            <template v-for='(item,key0) in propertyDetails.video'>
              <swiper-item class='flex  propertyDetails_fd1_0' v-if=" propertyDetails.video.length!=0" :key='key0'>
                <view class="video-bg" v-if="!isPlay" @click="playVideo">
                  <image :src="propertyDetails.video_img" mode="aspectFill"></image>
                  <image class="plays" src="/static/images/play.png" mode="aspectFill"></image>
                </view>
                <view class="" v-else>
                  <video class='flex  propertyDetails_fd1_0_c1_c0' id="myVideo" :src="propertyDetails.video[0].path"
                    @fullscreenchange="fullscreenchange" @ended="videoEnd" x5-video-player-type="h5"
                    :enable-progress-gesture='true'></video>
                </view>
                <!-- <video class='flex  propertyDetails_fd1_0_c1_c0'  controls='true' x5-video-player-type="h5"
                  :enable-progress-gesture='true' object-fit="fill"></video> -->

              </swiper-item>
            </template>
            <template v-for='(item,key0) in propertyDetails.images'>
              <swiper-item class='flex' :key='key0' @click="preveImage(propertyDetails.images,key0)">
                <image class='propertyDetails_fd1_0_c2_c0' mode="aspectFill" :src='item'></image>
              </swiper-item>
            </template>

          </swiper>
          <view style="position: absolute"
            class="flex dot flex align-center justify-center propertyDetails_swiperDotfd1_0">
            <view class='flex flex align-center justify-center propertyDetails_numberfd1_0_c0'>
              <text>{{bannerIndexfd1_0+1}}</text>
              <text>/</text>
              <text>{{(propertyDetails.video.length+propertyDetails.images.length)}}</text>
            </view>

          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1699599639668" :mask="true" :mask-close-able="false" mode='bottom'>
        <!---分享flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout propertyDetails_flex_2">
          <view class='flex flex-direction flex-wrap align-stretch flex-sub propertyDetails_fd2_0'>
            <view class='flex flex-wrap align-center justify-between propertyDetails_fd2_0_c0'>
              <view class='flex flex-wrap align-center propertyDetails_fd2_0_c0_c0'>
              </view>
              <text class='propertyDetails_fd2_0_c0_c1'>{{$t('分享至')}}</text>
              <image class='propertyDetails_fd2_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"54.png"'
                @tap.stop="popupShow1699599639668=false"></image>
            </view>
            <view class='flex flex-wrap align-center justify-between propertyDetails_fd2_0_c1'>
              <view class='flex flex-direction flex-wrap align-center' @tap.stop="copyText(propertyDetails.h5_share)">
                <image class='propertyDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
                <text class='propertyDetails_fd2_0_c1_c0_c1'>{{$t('复制链接')}}</text>
              </view>
              <!-- #ifdef APP || APP-PLUS -->
              <view class='flex flex-direction flex-wrap align-center' @click.stop="shareApp('1')">
                <image class='propertyDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"56.png"'></image>
                <text class='propertyDetails_fd2_0_c1_c0_c1'>{{$t('微信好友')}}</text>
              </view>
              <view class='flex flex-direction flex-wrap align-center' @click.stop="shareApp('2')">
                <image class='propertyDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"57.png"'></image>
                <text class='propertyDetails_fd2_0_c1_c0_c1'>{{$t('朋友圈')}}</text>
              </view>
              <!-- #endif -->
              <!-- <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/shouye/reportingPage/reportingPage?id=${propertyDetails.aid}&type=${propertyDetails.publisher_type}`">
                <image class='propertyDetails_fd2_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"58.png"'></image>
                <text class='propertyDetails_fd2_0_c1_c0_c1'>{{$t('举报')}}</text>
              </view> -->
            </view>
          </view>
        </view>

        <!---分享flex布局结束-->

      </benben-popup>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout propertyDetails_flex_3">
        <view class='flex flex-direction flex-wrap align-stretch propertyDetails_fd3_0'>
          <view class='flex flex-wrap align-center'>
            <image class='propertyDetails_fd3_0_c0_c0' mode="aspectFit" :src='propertyDetails.user_avatar'></image>
            <view class='flex flex-direction flex-wrap align-start'>
              <view class='flex flex-wrap align-center'>
                <text class='propertyDetails_fd3_0_c0_c1_c0_c0'>{{propertyDetails.user_nickname}}</text>
                <text class='propertyDetails_fd3_0_c0_c1_c0_c1'
                  v-if=" propertyDetails.publisher_type=='1'">{{propertyDetails.rental_method_name}}</text><text
                  class='propertyDetails_fd3_0_c0_c1_c0_c1_1'
                  v-if=" propertyDetails.publisher_type=='2'">{{propertyDetails.rental_method_name}}</text><text
                  class='propertyDetails_fd3_0_c0_c1_c0_c1_2'
                  v-if=" propertyDetails.publisher_type=='3'">{{propertyDetails.rental_method_name}}</text><text
                  class='propertyDetails_fd3_0_c0_c1_c0_c1_3'
                  v-if=" propertyDetails.publisher_type=='4'">{{propertyDetails.rental_method_name}}</text>
              </view>
              <text class='propertyDetails_fd3_0_c0_c1_c1'>{{propertyDetails.create_time}}</text>
            </view>
          </view>
          <view class='flex flex-wrap align-center propertyDetails_fd3_0_c1'>
            <text class='propertyDetails_fd3_0_c1_c0'>{{propertyDetails.name}}</text>
          </view>
          <view class='flex flex-wrap align-end propertyDetails_fd3_0_c2'>
            <text class='propertyDetails_fd3_0_c2_c0'>{{$t('HK$')}}</text>
            <text class='propertyDetails_fd3_0_c2_c1'>{{propertyDetails.monthly_rent}}</text>
            <text class='propertyDetails_fd3_0_c2_c2'>{{$t('/月')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-between propertyDetails_fd3_0_c3'>
            <view class='flex flex-direction flex-wrap align-center justify-center propertyDetails_fd3_0_c3_c0'>
              <text class='propertyDetails_fd3_0_c3_c0_c0'>{{propertyDetails.publisher_type_name}}</text>
              <text class='propertyDetails_fd3_0_c3_c0_c1'>{{$t('出租方式')}}</text>
            </view>
            <view class='flex flex-direction flex-wrap align-center justify-center propertyDetails_fd3_0_c3_c0'>
              <text class='propertyDetails_fd3_0_c3_c0_c0'>{{propertyDetails.housingrental_duration}}</text>
              <text class='propertyDetails_fd3_0_c3_c0_c1'>{{$t('出租时长')}}</text>
            </view>
            <view class='flex flex-direction flex-wrap align-center justify-center propertyDetails_fd3_0_c3_c0'>
              <text
                class='propertyDetails_fd3_0_c3_c0_c0'>{{propertyDetails.start_time==1 ? $t('随时') : propertyDetails.start_time}}</text>
              <text class='propertyDetails_fd3_0_c3_c0_c1'>{{$t('起租日期')}}</text>
            </view>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch propertyDetails_fd3_1'>
          <text class='propertyDetails_fd3_0_c1_c0'>{{$t('房源信息')}}</text>
          <view class='flex flex-wrap align-start propertyDetails_fd3_0_c1'>
            <view class='flex flex-direction flex-wrap align-start propertyDetails_fd3_1_c1_c0'>
              <view class='flex flex-wrap align-center'>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c0'>{{$t('房屋类型')}}</text>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c1'>{{propertyDetails.housingtype_name}}</text>
              </view>
              <view class='flex flex-wrap align-center propertyDetails_fd3_0_c1'>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c0'>{{$t('电梯')}}</text>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c1'>{{propertyDetails.housinglift_name}}</text>
              </view>
              <view class='flex flex-wrap align-center propertyDetails_fd3_0_c1'>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c0'>{{$t('面积')}}</text>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c1'>{{propertyDetails.area}}{{$t('㎡')}}</text>
              </view>
            </view>
            <view class='flex flex-direction flex-wrap align-start'>
              <view class='flex flex-wrap align-center' v-if="propertyDetails.housingfloor_loucen">
                <text class='propertyDetails_fd3_1_c1_c0_c0_c0'>{{$t('所在楼层')}}</text>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c1'>{{propertyDetails.housingfloor_louceng}}</text>
              </view>
              <view class='flex flex-wrap align-center propertyDetails_fd3_0_c1'
                v-if="propertyDetails.housingtenantgender_name">
                <text class='propertyDetails_fd3_1_c1_c0_c0_c0'>{{$t('性别要求')}}</text>
                <text class='propertyDetails_fd3_1_c1_c0_c0_c1'>{{propertyDetails.housingtenantgender_name}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch propertyDetails_fd3_2'>
          <text class='propertyDetails_fd3_2_c0'>{{$t('房源位置')}}</text>
          <view class='flex flex-wrap align-start propertyDetails_fd3_0_c2' @click.stop="goMap">
            <text class='propertyDetails_fd3_2_c1_c0'>{{$t('位置信息：')}}</text>
            <view class='propertyDetails_fd3_2_c1_c1'>
              <text
                class='propertyDetails_fd3_2_c1_c0'>{{propertyDetails.addr_pname}}-{{propertyDetails.housingaddress_name}}</text>
            </view>
          </view>
          <view class='flex flex-wrap align-start propertyDetails_fd3_0_c2' @click.stop="goMap">
            <text class='propertyDetails_fd3_2_c1_c0'>{{$t('地铁信息：')}}</text>
            <view class='propertyDetails_fd3_2_c1_c1'>
              <text
                class='propertyDetails_fd3_2_c1_c0'>{{propertyDetails.mrt_pname}}-{{propertyDetails.housingmrt_name}}</text>
            </view>
          </view>
          <view class='flex flex-wrap align-start propertyDetails_fd3_0_c2' v-if="propertyDetails.address">
            <text class='propertyDetails_fd3_2_c1_c0'>{{$t('详细地址：')}}</text>
            <view class='propertyDetails_fd3_2_c1_c1'>
              <text class='propertyDetails_fd3_2_c1_c0'>{{propertyDetails.address}}</text>
            </view>
          </view>
          <!-- <view class='flex flex-wrap align-center propertyDetails_fd3_0_c1'>
            <map id="map" v-if="isMap" class="map" :show-location="true" :markers="markers" :latitude="propertyDetails.address_lat"
              :longitude="propertyDetails.address_lng"></map>
            <image class='propertyDetails_fd3_2_c2_c0' mode="aspectFill" :src='propertyDetails.map_img'></image>
          </view> -->
        </view>
        <view class='flex flex-direction flex-wrap align-stretch propertyDetails_fd3_2'>
          <text class='propertyDetails_fd3_2_c0'>{{$t('个人情况说明')}}</text>
          <view class='flex flex-wrap align-center propertyDetails_fd3_0_c2'>
            <text class='propertyDetails_fd3_3_c1_c0'>{{propertyDetails.introduce}}</text>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch propertyDetails_fd3_2'>
          <text class='propertyDetails_fd3_2_c0'>{{$t('房屋描述')}}</text>
          <view class='flex flex-wrap align-center propertyDetails_fd3_0_c2'>
            <text class='propertyDetails_fd3_3_c1_c0'>{{propertyDetails.other_desc}}</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex propertyDetails_flex_4">
        <view class='flex flex-wrap align-center flex-sub propertyDetails_fd4_0'>
          <view class='flex flex-direction flex-wrap align-center propertyDetails_fd4_0_c0'
            @tap.stop="addcancelFavoriteFunc()">
            <image class='propertyDetails_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"51.png"'
              v-if=" propertyDetails.is_collect!='1'"></image>
            <image class='propertyDetails_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"96.png"'
              v-if=" propertyDetails.is_collect=='1'"></image>
            <text class='propertyDetails_fd4_0_c0_c1' v-if=" propertyDetails.is_collect!='1'">{{$t('收藏')}}</text><text
              class='propertyDetails_fd4_0_c0_c1' v-if=" propertyDetails.is_collect=='1'">{{$t('已收藏')}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center propertyDetails_fd4_0_c0'
            @tap.stop="popupShow1699599639668=true">
            <image class='propertyDetails_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"52.png"'></image>
            <text class='propertyDetails_fd4_0_c0_c1'>{{$t('分享')}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/shouye/reportingPage/reportingPage?id=${propertyDetails.aid}&type=${propertyDetails.publisher_type}`">
            <image class='propertyDetails_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"58.png"'></image>
            <text class='propertyDetails_fd4_0_c0_c1'>{{$t('举报')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-center flex-sub propertyDetails_fd4_0_c2'
            @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/customerService/customerService?type=${propertyDetails.publisher_type}&aid=${propertyDetails.aid}`">
            <image class='propertyDetails_fd4_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"53.png"'></image>
            <text class='propertyDetails_fd4_0_c2_c1'>{{$t('立即咨询')}}</text>
          </view>
        </view>

      </view>
      <view :style="{height: '98rpx'}"></view>


    </view>
    <!-- #ifdef H5 -->
    <view class="text-df text-white flex align-center justify-between fixedupload" @click.stop="upLoad">
      <view class="flex align-center">
        <image src="../../../static/logo.png" mode=""></image>
        <view class="">使用 NextRent App 解鎖完整功能 </view>
      </view>
      <view class="text-sm btns">去下載</view>
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "popupShow1699599639668": false,
        "bannerIndexfd1_0": 0,
        "propertyDetails": {
          "aid": "",
          "name": "",
          "user_nickname": "",
          "publisher_type": "",
          "housingrentalmethod_name": "",
          "housingrentalduration_name": "",
          "start_time": "",
          "monthly_rent": "",
          "housingtype_name": "",
          "housingfloor_louceng": "",
          "housinglift_name": "",
          "housingaddress_name": "",
          "area": "",
          "address": "",
          "housingtenantgender_name": "",
          "video": [],
          "images": [],
          "mobile": "",
          "wechat": "",
          "whatsapp": "",
          "introduce": "",
          "other_desc": "",
          "create_time": "",
          "status": "",
          "refuse_reason": "",
          "housingrentalmethod_id": "",
          "housingrentalduration_id": "",
          "housingtype_id": "",
          "housingfloor_id": "",
          "housinglift_id": "",
          "housingaddress_id": "",
          "address_province": "",
          "address_city": "",
          "address_district": "",
          "address_address": "",
          "address_lat": "",
          "address_lng": "",
          "housingtenantgender_id": "",
          "user_id": "",
          "housingschool_name": "",
          "housingmrt_name": "",
          "housingschool_id": "",
          "housingmrt_id": "",
          "apartmentbuildtype_name": "",
          "is_recommend": "",
          "peripheral_desc": "",
          "apartmentbuildtype_id": "",
          "rental_method": "",
          "apartmentbrand_name": "",
          "apartmentbrand_id": "",
          "housing_list": [],
          "is_collect": ""
        },
        "id": "3",
        videoContext: null,
        isPlay: false,
        markers: [],
        video_img: '',
        bg_img: '',
        language_id: '',
        isMap: false

      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      this.language_id = global.locale
      console.log('language_idlanguage_id', this.language_id)
      let {
        id
      } = options
      if (id !== undefined) this.id = id
      this.getPropertyFunc()
    },
    onUnload() {

    },
    onReady() {
      this.videoContext = uni.createVideoContext('myVideo');
    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {
      if (e.scrollTop > 50) {
        this.isMap = true
      } else {
        this.isMap = false
      }
    },
    methods: {
      upLoad() {
        let platform = uni.getSystemInfoSync().platform
        if (platform == 'ios') {
          window.location.href = "https://apps.apple.com/cn/app/nextrent/id6475764677"
        } else {
          window.location.href = "https://play.google.com/store/apps/details?id=com.xianggangfangyuans.benben&pli=1"
        }
      },
      goBack() {
        // #ifdef APP || APP-PLUS
        uni.navigateBack()
        // #endif
        // #ifdef H5
        window.location.href = 'https://api.nextrenthk.com/h5/#/'
        // #endif
      },
      preveImage(list, index) {
        uni.previewImage({
          urls: list,
          current: index
        })
      },
      // 分享APP
      shareApp(type) {
        let that = this
        let provider = ''
        let scene = ''
        if (type == 1) {
          provider = 'weixin'
          scene = 'WXSceneSession'
        } else if (type == 2) {
          provider = 'weixin'
          scene = 'WXSenceTimeline'
        }
        // let links = that.propertyDetails.h5_share +
        //   `/pages/shouye/propertyDetails/propertyDetails?id=${that.propertyDetails.aid}`
        // console.log(' that.propertyDetails', links)
        uni.share({
          provider: provider,
          scene: scene,
          imageUrl: '/static/logo.png',
          title: that.propertyDetails.name,
          href: that.propertyDetails.h5_share,
          success: function(res) {
            console.log('22222')
            console.log("success:" + JSON.stringify(res));
          },
          fail: function(err) {
            this.$message.info('分享失败')
            console.log("fail:" + JSON.stringify(err));
          }
        });
      },
      changebgImage($event) {
        this.bannerIndexfd1_0 = $event.detail.current

        if (this.propertyDetails.video_img && this.bannerIndexfd1_0 == 0) {
          this.bg_img = this.propertyDetails.video_img
        } else {
          this.bg_img = this.propertyDetails.images[this.bannerIndexfd1_0 - 1]
        }
      },
      // 打开地图
      goMap() {
        let that = this
        let address_lat = parseFloat(this.propertyDetails.address_lat)
        let address_lng = parseFloat(this.propertyDetails.address_lng)
        uni.openLocation({
          latitude: address_lat,
          longitude: address_lng,
          name: that.propertyDetails.address,
          success() {
            console.log('success')
          }
        })
      },
      // 开始播放
      playVideo() {
        this.isPlay = true;
        let that = this;
        setTimeout(() => {
          that.videoContext.requestFullScreen(0);
          that.videoContext.play();
        }, 200);
      },
      /**
       * @event
       * @description  视频结束监听
       * */
      videoEnd() {
        let that = this
        that.videoContext.exitFullScreen();
        that.isPlay = false
      },
      /**
       * @event
       * @description  视频全屏监听
       * */
      fullscreenchange(e) {
        let that = this
        // 退出全屏时
        if (!e.detail.fullScreen) {
          that.isPlay = false
          that.videoContext.pause();
        }
      },
      //获取房源详情
      async getPropertyFunc() {
        //请求方法
        //数据验证

        let datapropertyDetails = await this.$api.post(global.apiUrls.post65433684573f4, {
          aid: this.id
        });

        if (datapropertyDetails.data.code != 1) {
          this.$message.info(datapropertyDetails.data.msg);
          return
        }
        let infopropertyDetails = datapropertyDetails.data;
        this.propertyDetails = infopropertyDetails.data
        if (this.propertyDetails.video_img) {
          this.bg_img = this.propertyDetails.video_img
        } else {
          if (this.propertyDetails.images.length) {
            this.bg_img = this.propertyDetails.images[0]
          }
        }
        console.log(' this.propertyDetails.address_lat', this.propertyDetails.address_lat)
        this.markers.push({
          id: 1,
          latitude: parseFloat(this.propertyDetails.address_lat),
          longitude: parseFloat(this.propertyDetails.address_lng),
          iconPath: '/static/images/location.png',
          width: 40,
          height: 40,
        })
      },
      //添加取消收藏
      async addcancelFavoriteFunc() {
        let data65434b19cc781 = await this.$api.post(global.apiUrls.post65434b19cc781, {
          type: this.propertyDetails.publisher_type,
          house_id: this.propertyDetails.aid,
          house_name: this.propertyDetails.name
        });

        if (data65434b19cc781.data.code != 1) {
          this.$message.info(data65434b19cc781.data.msg);
          return
        }
        this.getPropertyFunc()
        this.$message.info(res.data.msg);

      }
    }
  };
</script>
<style lang="scss" scoped>
  .fixedupload {
    width: 100%;
    position: fixed;
    bottom: 100rpx;
    padding: 32rpx 24rpx;
    left: 0;
    text-align: center;
    background-color: #000;
    z-index: 9;
    border-radius: 44rpx 44rpx 0 0;

    image {
      width: 50rpx;
      height: 50rpx;
      border-radius: 16rpx;
      margin-right: 12rpx;
    }

    .btns {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 16rpx;
      text-align: center;
      width: #0181ff;
      background-color: #0181ff;
    }
  }

  .map {
    flex: 1;
    // width: 750rpx;
    height: 300rpx;
  }

  ::v-deep .amap-logo {
    opacity: 0 !important;
  }

  ::v-deep .amap-copyright {
    opacity: 0 !important;
  }

  .video-bg {
    width: 100%;
    height: 100%;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .plays {
      position: absolute;
      top: 30%;
      left: 45%;
      width: 80rpx;
      height: 80rpx;
      z-index: 2;
    }
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(248, 248, 248, 1);
    background-size: 100% auto;
  }

  .propertyDetails_flex_0 {
    // background: url(image-path('80.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-color: #FFF;
    // background-size: 100% auto !important;
  }

  .propertyDetails_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
    line-height: 88rpx;
  }

  .propertyDetails_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333
  }

  .propertyDetails_fd0_0_c0 {
    width: 120rpx;
  }

  .propertyDetails_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .propertyDetails_numberfd1_0_c0 {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 52rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .propertyDetails_fd1_0_c2_c0 {
    width: 750rpx;
    height: 520rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd1_0_c1_c0 {
    width: 750rpx;
    height: 520rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .propertyDetails_fd1_0 {
    width: 750rpx;
    height: 520rpx;
  }

  .propertyDetails_swiperDotUnselectedfd1_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .propertyDetails_swiperDotSelectedfd1_0 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .propertyDetails_swiperDotfd1_0 {
    position: absolute;
    bottom: 8rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .propertyDetails_flex_2 {
    background: rgba(255, 255, 255, 1);
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .propertyDetails_fd2_0_c1_c0_c1 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd2_0_c1_c0_c0 {
    width: 80rpx;
    height: 80rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd2_0_c1 {
    margin: 40rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 60rpx 0rpx 60rpx;
  }

  .propertyDetails_fd2_0_c0_c2 {
    width: 26rpx;
    height: 26rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd2_0_c0_c1 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 53rpx;
  }

  .propertyDetails_fd2_0_c0_c0 {
    width: 26rpx;
    height: 26rpx;
  }

  .propertyDetails_fd2_0_c0 {
    padding: 0rpx 40rpx 0rpx 040rpx;
  }

  .propertyDetails_fd2_0 {
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding: 42rpx 0rpx 66rpx 0rpx;
  }

  .propertyDetails_flex_3 {
    padding: 0rpx 24rpx 0rpx 24rpx;
    position: relative;
    margin: -50rpx 0rpx 42rpx 0rpx;
  }

  .propertyDetails_fd3_3_c1_c0 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .propertyDetails_fd3_2_c2_c0 {
    width: 654rpx;
    height: 320rpx;
    border-radius: 16rpx;
  }

  .propertyDetails_fd3_2_c1_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
    width: 487rpx;
  }

  .propertyDetails_fd3_2_c1_c0 {
    color: #333333;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 42rpx;
  }

  .propertyDetails_fd3_2_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .propertyDetails_fd3_2 {
    background: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    background-size: 100% auto !important;
    padding: 32rpx 24rpx 32rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .propertyDetails_fd3_1_c1_c0_c0_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .propertyDetails_fd3_1_c1_c0_c0_c0 {
    color: #999999;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
    width: 130rpx;
    margin: 0rpx 20rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_1_c1_c0 {
    margin: 0rpx 100rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_1 {
    background: rgba(255, 255, 255, 1);
    margin: 0rpx 0rpx 24rpx 0rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 32rpx 24rpx 32rpx 24rpx;
  }

  .propertyDetails_fd3_0_c3_c0_c1 {
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_0_c3_c0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .propertyDetails_fd3_0_c3_c0 {
    background: rgba(246, 247, 249, 1);
    width: 208rpx;
    height: 130rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
  }

  .propertyDetails_fd3_0_c3 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_0_c2_c2 {
    color: #F7582F;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .propertyDetails_fd3_0_c2_c1 {
    color: #F7582F;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 41rpx;
  }

  .propertyDetails_fd3_0_c2_c0 {
    color: #F7582F;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 36rpx;
  }

  .propertyDetails_fd3_0_c2 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_0_c1_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 42rpx;
  }

  .propertyDetails_fd3_0_c1 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_0_c0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 42rpx;
  }

  .propertyDetails_fd3_0_c0_c1_c0_c1_3 {
    background: rgba(1, 129, 255, 1);
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 32rpx;
    padding: 4rpx 7rpx 4rpx 7rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
  }

  .propertyDetails_fd3_0_c0_c1_c0_c1_2 {
    background: rgba(96, 207, 115, 1);
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 32rpx;
    padding: 4rpx 7rpx 4rpx 7rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
  }

  .propertyDetails_fd3_0_c0_c1_c0_c1_1 {
    background: rgba(255, 196, 0, 1);
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 32rpx;
    padding: 4rpx 7rpx 4rpx 7rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
  }

  .propertyDetails_fd3_0_c0_c1_c0_c1 {
    background: rgba(255, 141, 0, 1);
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 32rpx;
    padding: 4rpx 7rpx 4rpx 7rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
  }

  .propertyDetails_fd3_0_c0_c1_c0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 42rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_0_c0_c0 {
    width: 80rpx;
    height: 80rpx;
    border-radius: 100rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .propertyDetails_fd3_0 {
    background: rgba(255, 255, 255, 1);
    padding: 32rpx 24rpx 32rpx 24rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .propertyDetails_flex_4 {
    background: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 98rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    background-size: 100% auto;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(0, 0, 0, 0.05);
  }

  .propertyDetails_fd4_0_c2_c1 {
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .propertyDetails_fd4_0_c2_c0 {
    width: 44rpx;
    height: 44rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .propertyDetails_fd4_0_c2 {
    background: rgba(1, 129, 255, 1);
    margin: 0rpx 0rpx 0rpx 40rpx;
    background-size: 100% auto;
    border-radius: 40rpx;
    height: 80rpx;
  }

  .propertyDetails_fd4_0_c0_c1 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 3rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd4_0_c0_c0 {
    width: 44rpx;
    height: 44rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .propertyDetails_fd4_0_c0 {
    margin: 0rpx 44rpx 0rpx 0rpx;
  }

  .propertyDetails_fd4_0 {
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding: 0rpx 50rpx 0rpx 50rpx;
  }
</style>
